<template>
	<view class="pd16_15">
		<view class="flex alcenter space" style="margin-bottom: 30upx;">
			<view class="flex alcenter">
				<image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[10]"></image>
				<text class="ft16 ftw600 cl-main ml15 alpsoftjurnal">{{$t('video.title4')}}</text>
			</view>
			<scroll-view class="scroll-view" scroll-x="true">
				<view class="cont">
					<view class="type" :class="form.cate_id == ''?'select':''" @click="typeFn({id: ''})">全部</view>
					<view class="type alpsoftjurnal" :class="form.cate_id == item.id?'select':''" v-for="(item, index) in videoType"
						:key="index" @click="typeFn(item)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<scroll-view class="scroll-video" scroll-y="true" @scrolltolower="lower">
			<view class="flex space" style="display:flex; flex-wrap:wrap;">
				<block v-for="(value,key) in list" :key="key">
					<view class="box pb10 mb15" style="width:31%; position: relative; border-radius:20rpx;"
						@click="detail(value)">
						<image class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
						<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main alpsoftjurnal">{{value.name}}</view>
					</view>
				</block>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoType: [],
				status: 'more',
				form: {
					name: '',
					cate_id: '',
					page: 1,
					page_size: 10,
				},
				list: [],
				total: 0,
			}
		},

		created() {
			this.$nextTick(() => {
				this.videoCategory()
				this.searchVideo()
			})
		},
		methods: {
			videoCategory() {
				uni.request({
					url: this.configs.webUrl + '/api/video/videoCategory',
					data: {
						token: uni.getStorageSync('token'),
						lang: uni.getStorageSync('language')
					},
					success: data => {
						console.log(data);
						this.videoType = data.data.data
					}
				})
			},
			searchVideo() {
				this.form.lang = uni.getStorageSync('language')
				this.status = 'loading'
				uni.request({
					url: this.configs.webUrl + '/api/video/searchVideo',
					data: this.form,
					success: res => {
						console.log(res);
						this.total = res.data.data.count
						this.list = this.list.concat(res.data.data.list)
						if (this.total > this.form.page * this.form.page_size) {
							this.status = 'more'
						} else {
							this.status = 'noMore'
						}
					}
				});
			},
			lower() {
				if (this.total > this.form.page * this.form.page_size) {
					this.form.page++
					this.searchVideo()
				}
			},
			typeFn(val) {
				this.form.cate_id = val.id
				this.form.page = 1
				this.list = []
				this.searchVideo()
			},
			detail(val) {
				uni.navigateTo({
					url: '/pages/client/tuan/detail?vid=' + val.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-video {
		max-height: calc(100vh - 184rpx - 60rpx - 62rpx);
	}
	.scroll-view {
		width: 60%;
		white-space: nowrap;

		.cont {
			display: flex;
		}

		.type {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-right: 20rpx;
		}

		.select {
			color: #F85A55;
		}
	}
</style>
<style>
	.home-header {
		height: 304rpx;
		width: 100%;
		position: relative;
		background: #363B4D;
		border-radius: 0rpx 0rpx 48rpx 48rpx;
	}

	.home-main {
		width: 100%;
		position: relative;
		margin-top: -156rpx;
		padding: 0 30rpx;
	}

	.home-mendian {
		width: 100%;
		height: 84rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 42rpx;
	}

	.tuan-product-l {
		width: 320rpx;
		height: 240rpx;
		border-radius: 16rpx;
		background: #F2F2F2;
	}

	.integral-mall-goods {
		width: 100%;
		height: 280rpx;
		background: #F2F2F2;
		border-radius: 16upx;
	}

	.tuan-product-r {
		width: calc(100% - 320rpx);
	}
</style>